import React, { useCallback, useEffect, useState } from 'react'
import { SearchBar } from 'antd-mobile'
import "./index.scss";
import axios from 'axios';
import lodash from 'lodash'
// import debounce from 'lodash/debounce';
import del from './img/del.png'
import { useNavigate } from 'react-router-dom';
const SearchCom = (props) => {
    let debounce = lodash.debounce
    let navigate = useNavigate();
    const [searchTxt, setSearchTxt] = useState('')
    const [searchList, setSearchList] = useState([])
    const [HotList, setHotList] = useState([])
    // const [keywords, setKeywords] = useState('')
    const [data, setData] = useState([])

    const changeTxt = (value) => {
        // console.log(value);

        setSearchTxt(value)
        //获取数据
        getSearchData((value));
    }
    const getSearchData = useCallback(debounce((value) => {
        // console.log(value);
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/esApi/suggestion', { "key": value, "isWholeSale": 0, "channelId": "C06022632001" }
        ).then(res => {
            console.log(res);
            let data = res.data.data.suggestionList;
            if (data.length > 0) {
                setSearchList(data)
            }

        })
    }, 1000), [])
    useEffect(() => {
        axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/searchWords', { isWholeSale: 0, channelId: null })
            .then(res => {
                let HotList = res.data.data.keywords
                console.log(HotList);
                setHotList(HotList)
                setData(sessionStorage.getItem("address") == null
                    ? []
                    : JSON.parse(sessionStorage.getItem("address")))
            })
    }, [])
    const goList = (value) => {
        console.log(value);
        navigate('/list/' + value);
        const result =
            sessionStorage.getItem("address") == null
                ? []
                : JSON.parse(sessionStorage.getItem("address"));
        console.log(result);
        var res = value;
        result.unshift(res);
        //去重，但是返回的是对象----new Set
        let newarr = new Set(result)
        // console.log(this.addArr);
        //获取key为address的json对象的值，Array.form转数组
        sessionStorage.setItem("address", JSON.stringify(Array.from(newarr)));

    }

    return (
        <div className="search_con">
            {/* 搜索框 */}
            <div className='search_inp'>
                <SearchBar placeholder='请输入内容' showCancelButton={() => true} value={searchTxt.trim()} onChange={changeTxt} onCancel={() => {
                    navigate(-1)
                }} />
            </div>
            {
                searchList.length !== 0 ? <ul style={{ marginTop: '10px' }}>
                    {
                        searchList.map((item, index) => <li key={index} onClick={() => { goList(item) }}
                            // dangerouslySetInnerHTML={{ __html: this.textHightLight('teststring', `${this.state.value}`) }}
                            className='sea_list'>
                            {item}
                        </li>)
                    }
                </ul>
                    :
                    <div>
                        <div style={{ marginTop: '10px', marginLeft: '10px' }}>
                            <h1 style={{ color: '#343434', fontSize: '15px', fontWeight: '700' }}>热门搜索</h1>

                            <ul className='Hot_list'>
                                {
                                    HotList.map((item, index) =>


                                        <li key={index} onClick={() => {
                                            goList(item.name)
                                        }}>
                                            {
                                                item.isHighlight === '1' ?
                                                    <p className='Hot_ietm'>{item.name}</p>
                                                    :
                                                    <p className='Hot_ietm_ac'>{item.name}</p>

                                            }
                                        </li>)
                                }
                            </ul>
                        </div>
                        <div>
                            {
                                data.length > 0 ?
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <h1 style={{ color: '#343434', fontSize: '15px', fontWeight: '700', marginTop: '10px', marginLeft: '10px' }}>搜索历史</h1>
                                        <img src={del} alt={del} style={{
                                            width: '15px',
                                            height: '15px',
                                            marginRight: '10px',
                                            marginTop: '10px'
                                        }}
                                            onClick={() => {
                                                sessionStorage.clear();
                                            }}
                                        />
                                    </div>
                                    : ''
                            }

                            <ul className='Hot_list'>
                                {
                                    data.length > 0 ?
                                        data.map((item, index) =>
                                            <li key={index} className='Hot_ietm'>
                                                {
                                                    <p >{item}</p>
                                                }
                                            </li>)
                                        : ''
                                }
                                {/* <li className='Hot_ietm'>{data}</li> */}

                            </ul>
                            {/* 搜索历史需要保存在 localStorage中 */}
                        </div>

                    </div>
            }



        </div>
    )
}
export default SearchCom
